<template>
    <el-input
        :size="size"
        v-model="currentValue"
        :clearable="clearable"
        :disabled="disabled"
        :placeholder="placeholder"
        @input="handleChange"
        @blur="handleBlur"
        @clear="handleChange"
        @click.native.stop
    ></el-input>
</template>

<script>
export default {
    name: 'qtInput',

    props: {
        fildeName: {
            type: String
        },
        value: {
            type: [String, Number]
        },
        placeholder: {
            type: String
        },
        size: {
            type: String,
            default: 'mini'
        },
        clearable: {
            type: Boolean,
            default: true
        },
        disabled: {
            type: [Boolean, String],
            default: false
        }
    },

    data() {
        return {
            currentValue: ''
        };
    },

    created() {
        this.currentValue = this.value;
    },

    methods: {
        handleChange() {
            this.$emit('change', this.currentValue, this.fildeName);
            this.$emit('input', this.currentValue, this.fildeName);
        },

        handleBlur() {
            this.$emit('input', this.currentValue, this.fildeName);
        }
    }
};
</script>
